<template>
  <div class="content-wrap">
    <div class="content-box">
      <div class="content-top">
        <content-top @edit="handleEdit" />
      </div>
      <div class="content-bottom">
        <div class="content-bottom-box" ref="contentBottom">
          <content-bottom />
        <!-- <pipe-show /> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import ContentTop from './components/ContentTop'
import ContentBottom from './components/ContentBottom'
import PipeShow from './components/PipeShow'
const { mapActions, mapState } = createNamespacedHelpers('modeling')

export default {
  name: 'Modeling',
  components: {
    ContentTop,
    ContentBottom,
    PipeShow
  },
  watch: {
    imgUrl() {
      if (this.imgUrl) {
        this.setBttomWH()
      }
    }
  },
  beforeDestroy() {
    this.clearStore()
  },
  computed: {
    ...mapState(['windowW', 'windowH', 'imgUrl'])
  },
  methods: {
    ...mapActions(['clearStore', 'changeWindowW', 'changeWindowH']),
    setBttomWH() {
      const el = this.$refs['contentBottom']
      el.style.width = this.windowW + 'px'
      el.style.height = this.windowH + 'px'
      el.style.flex = 'initial'
    },
    handleEdit() {
      const el = this.$refs['contentBottom']
      const w = el.clientWidth
      const h = el.clientHeight
      this.changeWindowW(w)
      this.changeWindowH(h)
    }
  }
}
</script>

<style lang="less" scoped>
  .content-box {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 10px;
    box-sizing: border-box;

    .content-bottom {
      flex: 1;
      overflow: auto;
    }
    .content-bottom-box {
      width: 100%;
      height: 100%;
    }
  }
</style>
